<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>乘法口诀表</title>
    <style>
      table {
        border-collapse: collapse; /*互相连接*/
        width: 100%;
      }
      td,
      th {
        border: 1px solid black; /*单元格边框*/
        padding: 8px; /*单元格内边距 */
        text-align: center; /* 文本居中*/
      }
    </style>
  </head>
  <body>
    <table id="tab"></table>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const table = document.getElementById("tab");

        // 生成表头
        const headerRow = table.insertRow(0);
        for (let i = 1; i <= 9; i++) {
          const headerCell = headerRow.insertCell(i - 1);
          headerCell.textContent = i;
        }

        // 生成乘法口诀表的主体
        for (let i = 1; i <= 9; i++) {
          const row = table.insertRow(i); // 注意：这里i从1开始，因为表头已经占据了第0行
          for (let j = 1; j <= 9; j++) {
            const cell = row.insertCell(j - 1);
            cell.textContent = `${i}×${j}=${i * j}`;
          }
        }
      });
    </script>
  </body>
</html>
